<template>
	<div style="width:100%;" v-on:mouseover="showBtn(true)" v-on:mouseleave="showBtn(false)">
		<div style="flex: 1 1 0%; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
			<span>
              <span>{{data.name}}</span>
			</span>
			<span v-show="active" style="margin-right:10px">
              <el-button style="font-size: 12px;" type="text"  @click.stop="nodeAdd(node, data, store)">添加</el-button>
              <el-button style="font-size: 12px;" type="text" @click.stop="nodeEdit(node, data, store)">修改</el-button>
                <el-button style="font-size: 12px;" type="text"  @click.stop="nodeSortDown(node, data, store)">下移</el-button>
              <el-button v-show="!data.children" style="font-size: 12px;" type="text" @click.stop="nodeDel(node, data, store)">删除</el-button>
            </span>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			active: false
		}
	},
	props: ['node', 'data', 'store'],
	methods: {
		showBtn(flag) {
			this.active = flag;
		},
		nodeAdd(s, d, n) { //新增
			this.$emit('nodeAdd', n, d, s)
		},
		nodeEdit(s, d, n) { //编辑
			this.$emit('nodeEdit', n, d, s)
		},
		nodeDel(s, d, n) { //删除
			this.$emit('nodeDel', n, d, s)
		},
		nodeSortDown(s, d, n) { //上移
			this.$emit('nodeSortDown', n, d, s)
		},
	}
}

</script>
